<template>
  <view class="sign-container">
    <back :showBackText="false" customClass="bg-gradual-blue text-white" title="积分乐园"></back>
    <!-- 主要内容 -->
    <view class="main-content" v-if="isLoad">
      <!-- 积分概览卡片 -->
      <view class="score-overview-card">
        <view class="score-header">
          <view class="score-avatar">
            <image src="/static/images/coin-gold.svg" mode="aspectFit"></image>
          </view>
          <view class="score-info">
            <text class="score-label">我的积分</text>
            <text class="score-value">{{ info.score || 0 }}</text>
          </view>
        </view>
        
        <view class="score-stats">
          <view class="stat-item">
            <view class="stat-icon today-out">
            <text class="cuIcon-roundclose" style="color: #ff6b6b; font-size: 32rpx;"></text>
          </view>
            <view class="stat-content">
              <text class="stat-value">{{ info.score_out || 0 }}</text>
              <text class="stat-label">今日使用</text>
            </view>
          </view>
          
          <view class="stat-divider"></view>
          
          <view class="stat-item">
            <view class="stat-icon today-in">
            <text class="cuIcon-roundadd" style="color: #51cf66; font-size: 32rpx;"></text>
          </view>
            <view class="stat-content">
              <text class="stat-value">{{ info.score_in || 0 }}</text>
              <text class="stat-label">今日获得</text>
            </view>
          </view>
    </view>
  </view>

      <!-- 任务列表 -->
      <view class="task-section">
        <view class="section-header">
          <text class="section-title">积分任务</text>
          <text class="section-subtitle">完成任务获得积分</text>
        </view>
        
        <view class="task-grid">
          <!-- 每日签到 -->
          <view class="task-card" @tap="confirmSign" v-if="info.is_sign == 0">
            <view class="task-icon sign">
              <text class="cuIcon-calendar" style="color: #fff; font-size: 32rpx;"></text>
            </view>
            <view class="task-info">
              <text class="task-name">每日签到</text>
              <text class="task-reward">+{{ info.sign_number || 5 }}积分</text>
            </view>
          </view>

          <view class="task-card" v-else>
            <view class="task-icon sign" style="opacity: 0.6;">
              <text class="cuIcon-roundcheckfill" style="color: #fff; font-size: 32rpx;"></text>
            </view>
            <view class="task-info">
              <text class="task-name">今日已签到</text>
              <text class="task-reward">已完成</text>
            </view>
          </view>

          <!-- 微信绑定 -->
          <view class="task-card" @tap="bindWeiXinTap" v-if="info.is_bind_wx == 0">
            <view class="task-icon wechat">
            <text class="cuIcon-weixin" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">绑定微信</text>
              <text class="task-reward">+{{ info.wx_number || 10 }}积分</text>
            </view>
          </view>

          <!-- 手机绑定 -->
          <view class="task-card" @tap="bindMobileTap" v-if="info.is_bind_mobile == 0 && !appIsAudit">
            <view class="task-icon mobile">
            <text class="cuIcon-mobile" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">绑定手机</text>
              <text class="task-reward">+{{ info.bind_mobile_number || 10 }}积分</text>
            </view>
          </view>

          <!-- 邮箱绑定 -->
          <view class="task-card" @tap="bindEmailTap" v-if="info.is_bind_email == 0 && !appIsAudit">
            <view class="task-icon email">
            <text class="cuIcon-mail" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">绑定邮箱</text>
              <text class="task-reward">+{{ info.mail_number || 10 }}积分</text>
            </view>
          </view>

          <!-- 公众号绑定 -->
          <view class="task-card" @tap="bindMpTap" v-if="info.is_bind_mp == 0">
            <view class="task-icon mp">
            <text class="cuIcon-notice" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">绑定公众号</text>
              <text class="task-reward">+{{ info.mp_number || 20 }}积分</text>
            </view>
          </view>

          <!-- 微信群 -->
          <view class="task-card" @tap="bindWxGroupTap" v-if="info.is_bind_wx_group == 0">
            <view class="task-icon group">
            <text class="cuIcon-group" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">加入学习群</text>
              <text class="task-reward">+{{ info.bind_wx_group_num || 15 }}积分</text>
            </view>
          </view>

          <!-- 添加到桌面 -->
          <view class="task-card" @tap="bindAddDeskTap" v-if="info.is_desktop == 0">
            <view class="task-icon desktop">
            <text class="cuIcon-home" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">添加到桌面</text>
              <text class="task-reward">+{{ info.add_desktop_number || 10 }}积分</text>
            </view>
          </view>

          <!-- 添加到我的小程序 -->
          <view class="task-card" @tap="bindAddMyAppTap" v-if="info.is_bind_email == 1">
            <view class="task-icon myapp">
            <text class="cuIcon-favorfill" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">收藏小程序</text>
              <text class="task-reward">+{{ info.add_my_app_number || 5 }}积分</text>
            </view>
          </view>

          <!-- 分享小程序 -->
          <button class="task-card" open-type="share">
            <view class="task-icon share">
            <text class="cuIcon-share" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">分享好友</text>
              <text class="task-reward">+{{ info.share_number }}积分</text>
            </view>
          </button>

          <!-- 分享资料 -->
          <view class="task-card" @tap="bindShareFileTap">
            <view class="task-icon upload">
            <text class="cuIcon-upload" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">分享资料</text>
              <text class="task-reward">+{{ info.share_file_number || 50 }}积分</text>
            </view>
          </view>

          <!-- 观看广告 -->
          <view class="task-card" @tap="bindVideoTap" v-if="info.is_watch_video == 0">
            <view class="task-icon video">
            <text class="cuIcon-video" style="color: #fff; font-size: 32rpx;"></text>
          </view>
            <view class="task-info">
              <text class="task-name">观看广告</text>
              <text class="task-reward">+{{ info.video_number || 5 }}积分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 积分记录 -->
      <view class="record-section" v-if="info.record_list && info.record_list.length > 0">
        <view class="section-header">
          <text class="section-title">积分记录</text>
          <text class="section-subtitle">最近{{ info.record_list.length }}条记录</text>
        </view>
        
        <view class="record-list">
          <view class="record-item" v-for="(record, index) in info.record_list" :key="index">
            <view class="record-icon" :class="record.score > 0 ? 'income' : 'expense'">
              <text :class="record.score > 0 ? 'cuIcon-roundadd' : 'cuIcon-roundclose'" 
                    :style="'color: ' + (record.score > 0 ? '#51cf66' : '#ff6b6b') + '; font-size: 28rpx;'"></text>
            </view>
            <view class="record-content">
              <text class="record-title">{{ record.source_name }}</text>
              <text class="record-time">{{ record.add_time }}</text>
            </view>
            <view class="record-score" :class="record.score > 0 ? 'positive' : 'negative'">
              {{ record.score }}
            </view>
          </view>
        </view>
      </view>

      <!-- 规则说明 -->
      <view class="rules-section" v-if="info.att_desc_list && info.att_desc_list.length > 0">
        <view class="section-header">
          <text class="section-title">规则说明</text>
        </view>
        <view class="rules-content">
          <view class="rule-item" v-for="(rule, index) in info.att_desc_list" :key="index">
            <text class="rule-number">{{ index + 1 }}</text>
            <text class="rule-text">{{ rule }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 任务说明弹窗 -->
    <confirm 
      :title="taskTitle" 
      :content="taskContent" 
      :status.sync="taskDescModal" 
      confirmText="我知道了"
      confirmTextClass="cuIcon-roundcheck">
    </confirm>
  </view>
</template>

<style src="./sign.css"></style>
<script src="./sign.js"></script>